// import { TabList } from "@mui/joy";
import { TabContext, TabList, TabPanel } from "@mui/lab";
import { Box, Tab, Tabs } from "@mui/material";
import { useMutation } from "@tanstack/react-query";
import { useSnackbar } from "notistack";
import React from "react";
import { useMemo } from "react";
import { useContext } from "react";
import { useState } from "react";
import { useEffect } from "react";
import Loading from "../../../components/loading";
import { GET_ACTIVITY_URL } from "../../../constants/url";
import { mutateQueryFn } from "../../../query/mutateQueryFn";
import { TitleContext } from "../../../router";
import Competition from "./Competition";
import Research from "./Research";
import Social from "./Social";
import Student from "./Student";
import Volunteer from "./Volunteer";
export default function ActivityControl() {
  const nowTitle = useContext(TitleContext);
  useEffect(() => {
    nowTitle.setnowTitle(5);
  }, []);
  const [value, setValue] = React.useState("1");
  const [myrows, setMyrows] = useState([]);
  const handleChange = (event, newValue) => {
    setValue(newValue);
  };
  const {
    isLoading: getLoading,
    data: rows,
    isSuccess: getSuccess,
    mutate: getMutate,
  } = useMutation(["getActivity"], mutateQueryFn);
  useEffect(() => {
    if (getSuccess) {
      setMyrows(rows.data.data);
      //
    }
  }, [getSuccess]);
  useEffect(() => {
    getMutate({
      url: GET_ACTIVITY_URL,
      method: "get",
      useToken: true,
    });
  }, []);
  const {
    isLoading: changeLoading,
    isSuccess: changeSuccess,
    mutate: changeMutate,
  } = useMutation(["changeActivity"], mutateQueryFn);

  const handleAcceptClick = (id) => {
    setMyrows(myrows.filter((val) => val.id != id));
    changeMutate({
      url: GET_ACTIVITY_URL,
      method: "put",
      useToken: true,
      params: {
        id: id,
        score: myrows.filter((val) => val.id == id)[0].score,
      },
    });
  };
  const handleRefuseClick = (id) => {
    setMyrows(myrows.filter((val) => val.id != id));
    changeMutate({
      url: GET_ACTIVITY_URL,
      method: "delete",
      useToken: true,
      params: {
        id: id,
      },
    });
  };

  const processRowUpdate = (newRow) => {
    setMyrows(
      myrows.map((val) => {
        if (val.id == newRow.id) {
          return newRow;
        } else return val;
      })
    );
    return newRow;
  };
  const { enqueueSnackbar } = useSnackbar();

  useEffect(() => {
    if (changeSuccess) {
      enqueueSnackbar("操作成功", { variant: "success" });
      getMutate({
        url: GET_ACTIVITY_URL,
        method: "get",
        useToken: true,
      });
    }
  }, [changeSuccess]);

  return (
    <div>
      {getLoading && <Loading />}
      {getSuccess && !getLoading && myrows.length && (
        <Box sx={{ width: "100%", typography: "body1" }}>
          <Box sx={{ borderBottom: 1, borderColor: "divider" }}>
            <Tabs value={value} variant="fullWidth" onChange={handleChange}>
              <Tab label="社会实践" value="1" />
              <Tab label="学生工作" value="2" />
              <Tab label="志愿服务" value="3" />
              <Tab label="科研成果" value="4" />
              <Tab label="竞赛经历" value="5" />
            </Tabs>
          </Box>
          {value == 1 && (
            <Social
              processRowUpdate={processRowUpdate}
              handleRefuseClick={handleRefuseClick}
              handleAcceptClick={handleAcceptClick}
              rows={myrows.filter((val) => val.type == 0)}
            />
          )}
          {value == 2 && (
            <Student
              handleRefuseClick={handleRefuseClick}
              handleAcceptClick={handleAcceptClick}
              processRowUpdate={processRowUpdate}
              rows={myrows.filter((val) => val.type == 1)}
            />
          )}
          {value == 3 && (
            <Volunteer
              handleAcceptClick={handleAcceptClick}
              handleRefuseClick={handleRefuseClick}
              processRowUpdate={processRowUpdate}
              rows={myrows.filter((val) => val.type == 2)}
            />
          )}
          {value == 4 && (
            <Research
              handleAcceptClick={handleAcceptClick}
              handleRefuseClick={handleRefuseClick}
              processRowUpdate={processRowUpdate}
              rows={myrows.filter((val) => val.type == 4)}
            />
          )}
          {value == 5 && (
            <Competition
              handleRefuseClick={handleRefuseClick}
              handleAcceptClick={handleAcceptClick}
              processRowUpdate={processRowUpdate}
              rows={myrows.filter((val) => val.type == 3)}
            />
          )}
        </Box>
      )}
    </div>
  );
}
